/*TABLET*/
@media only screen and (max-width: 768px) {

#container {
height: 140%;
width: 90%;
}

header {
height: 6%;
}

nav {
height: 5%;
}

#content {
height: 65%;
text-align: center;
}
/*the following SoM and W&E are on the homepage; those below on their specific pages*/
#schoolOfMusic {
float: none;
width: 100%;
height: 50%;
margin-left: 0%;
}

#weddingsAndEvents {
float: none;
width: 100%;
height: 50%;
margin-right: 0%;
text-align: center;
}
/*the info tag is for the information sections on the left found on About/SoM/W&E/Contact pages*/
#info {
float: none;
width: 75%;
height: 44%;
margin-right: 0%;
text-align: justify;	
}

#aboutimage {
float: none;
width: 100%;
height: 50%;	
}

/*the following SoM and W&E are on their specific pages*/
#schoolofmusicimage {
float: none;
width: 100%;
height: 50%;
}

#weddingsandeventsimage {
float: none;
width: 100%;
height: 50%;
}

#contactimage {
float: none;
width: 100%;
height: 50%;
}
#features {
height: 10%;
}

#widgets {
    /* Do I need to add any float properties for here? */
}

#soundcloud {
    /* Do I need to add any float properties for here? */
height: 70%;
}

footer {
margin-top: 0%;
margin-bottom: 5%;
}

}

/*SMARTPHONES*/
@media only screen and (min-width:320px) and (max-width: 736px) {

#container {
height: 340%;
}

header {
height: 12%;
margin: 1%;
font-size: 40px;
}

nav {
margin: 0%;
margin-bottom: 0%;
padding-top: 0%;
padding-bottom: 20%;
}

nav ul li { 
display: block;
text-align: left;
padding-top: 2%;
line-height: 250%;
}

#content {
height: 55%;
margin-top: 10%;
}
/*the following SoM and W&E are on the homepage; those below on their specific pages*/
#schoolOfMusic {
float: none;
width: 100%;
height: 50%;
margin-left: 0%;
padding-top: 35%;
}

#weddingsAndEvents {
float: none;
width: 100%;
height: 50%;
margin-right: 0%;
}

/*the info tag is for the information sections on the left found on About/SoM/W&E/Contact pages*/
#info {
float: none;
width: 70%;
height: 70%;
margin-right: 5%;
text-align: justify;
padding-top: 30%;
}

#aboutimage {
display: none;
/* original coding but had trouble fitting in photo
float: none;
width: 100%;
height: 50%;
padding-bottom: 20%;*/
}

/*the following SoM and W&E are on their specific pages*/
#schoolofmusicimage {
display: none;
/* original coding but had trouble fitting in photo
float: none;
width: 100%;
height: 50%;
margin-top: 4%;*/
}

#weddingsandeventsimage {
display: none;
/* original coding but had trouble fitting in photo
float: none;
width: 100%;
height: 50%;
margin-top: 8%;*/
}

#contactimage {
display: none;
/*float: none;
width: 100%;
height: 50%;
padding-bottom: 30%;*/
}

#features {
height: 10%;
padding-top: 35%;
}

#widgets {
float: left;
    /* Do I need to add any float properties for here? */
}

#soundcloud {
float: right;
    /* Do I need to add any float properties for here? */
height: 70%;
}

footer {
padding-bottom: 1%;
}

}